<template>
  <div>
    <div class="container">
      <div class="d-flex p-5 m-auto">
        <span class="h4 w-50 text-end">请填写孩子基本信息：</span>
        <div>
          <img src="/hbbgimg/hb_bg1.png" alt="" />
        </div>
      </div>

      <!-- 孩子详情 -->
      <div class="w-75 m-auto text-center">
        <!-- 输入联系人 -->
        <div class="demo-input-suffix d-flex mb-4 ms-5 ps-5">
          <span class="w-25 text-end p-2">联系人:</span>
          <div class="w-25">
            <el-input placeholder="请输入联系人姓名" v-model="input1">
            </el-input>
          </div>
        </div>

        <!-- 输入联系方式 -->
        <div class="demo-input-suffix d-flex mb-4 ms-5 ps-5">
          <span class="w-25 text-end p-2">联系方式:</span>
          <div class="w-25">
            <el-input placeholder="请输入手机号" v-model="input2"> </el-input>
          </div>
        </div>

        <!-- 学员年级 -->
        <div class="demo-input-suffix d-flex mb-4 ms-5 ps-5">
          <span class="w-25 text-end p-2">学员年级:</span>
          <div class="w-25 text-start">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </div>
        </div>

        <!-- 授课省、市、县 -->

        <!-- 授课详细地址 -->
        <div class="demo-input-suffix d-flex mb-4 ms-5 ps-5">
          <span class="w-25 text-end p-2">授课详细地址:</span>
          <div class="w-25">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>
          </div>
        </div>

        <!-- 选择时间 -->
        <div class="block d-flex mb-4 ms-5 ps-5">
          <span class="demonstration w-25 text-end p-2">预约时间：</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format='timestamp'
          >
          </el-date-picker>
        </div>

        <!-- 勾选协议 -->
        <div class="mt-5 mb-3">
          <el-checkbox v-model="checked"
            >因上述信息不真实，而引发的后果，亦改由本人负责</el-checkbox
          >
        </div>

        <!-- 提交预约 -->
        <el-button type="primary">确认预约</el-button>
        <div>
          {{ value1[0] }}{{value1[1]}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      options: [],
      value: "",
      textarea: "",
      checked: false,
      value1: "",
      value2: "",
    };
  },
};
</script>

<style lang="scss" scoped>
</style>